<template>
  <div class="feedback-page">
    <van-nav-bar
      title="意见反馈"
      left-arrow
      @click-left="onClickLeft"
      fixed
      placeholder
      :border="false"
      :safe-area-inset-top="true"
    />
    
    <div class="feedback-content">
      <div class="form-section">
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-field
              v-model="feedbackForm.type"
              name="type"
              label="反馈类型"
              placeholder="请选择反馈类型"
              readonly
              is-link
              :rules="[{ required: true, message: '请选择反馈类型' }]"
              @click="showTypePicker = true"
            />
            
            <van-field
              v-model="feedbackForm.content"
              name="content"
              label="反馈内容"
              type="textarea"
              rows="4"
              placeholder="请详细描述您的建议或遇到的问题"
              :rules="[
                { required: true, message: '请输入反馈内容' },
                { min: 10, message: '反馈内容不能少于10个字符' }
              ]"
            />
            
            <van-field
              v-model="feedbackForm.contact"
              name="contact"
              label="联系方式"
              placeholder="请留下您的联系方式（选填）"
            />
          </van-cell-group>

          <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
              提交反馈
            </van-button>
          </div>
        </van-form>
      </div>
    </div>

    <van-action-sheet
      v-model:show="showTypePicker"
      :actions="feedbackTypes"
      @select="onTypeSelect"
      cancel-text="取消"
      title="选择反馈类型"
    />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()
const showTypePicker = ref(false)

const feedbackTypes = [
  { name: '功能建议' },
  { name: '问题反馈' },
  { name: '其他' }
]

const feedbackForm = reactive({
  type: '',
  content: '',
  contact: ''
})

const onClickLeft = () => {
  router.back()
}

const onTypeSelect = (action) => {
  feedbackForm.type = action.name
  showTypePicker.value = false
}

const onSubmit = () => {
  showToast('感谢您的反馈！')
  router.back()
}
</script>

<style scoped>
.feedback-page {
  min-height: 100vh;
  background: #f7f8fa;
}

.feedback-content {
  padding: 16px;
}

.form-section {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

:deep(.van-cell-group--inset) {
  margin: 0;
}

:deep(.van-field__label) {
  width: 80px;
}

:deep(.van-button--primary) {
  background: #7c5dfa;
  border-color: #7c5dfa;
}
</style> 